<page-header [title]="'资产管理'" [logo]="logo">
    <ng-template #logo><div class="logo">  <a routerLink="/iot/device/assetlist"><i nz-icon nzType="left"></i></a> </div></ng-template>
    <nz-card [nzBordered]="false" class>
      <form nz-form class="search__form" action="search">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="Name">资产名称</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="q.Name" name="Name" #DictionaryGroupName placeholder="请输入" />
              </nz-form-control>
            </nz-form-item>
          </div>
  
          <div nz-col [nzSpan]="24" [class.text-right]="expandForm" style="text-align: right">
            <button nz-button type="submit" [nzType]="'primary'" (click)="getData()">搜索</button>
            <!--<button nz-button type="submit" (click)="getData()" [nzType]="'primary'" [nzLoading]="loading">查询</button>-->
            <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
          </div>
        </div>
      </form>
  
      <button nz-button [nzType]="'primary'" (click)="openComponent()" acl [acl-ability]="59">
        <i nz-icon nzType="plus"></i>
        <span>
          导入资产
          <!-- {{ 'button.new' | i18n }} -->
        </span>
      </button>
      <!--<button nz-button [nzType]="'primary'" [routerLink]="['/manage/authority/roleform']" [queryParams]="{Id:-1}">
              <i nz-icon nzType="plus"></i>
              <span>{{ 'button.new' | translate }}</span>
            </button>-->
  
  
      <st #st
          [columns]="columns"
          [data]="url"
          [expandAccordion]="true"
          [page]="page"
          [req]="req"
          [res]="res"
          [expand]="expand"
          [res]="res"
          expandAccordion
          (change)="onchange($event)">
      </st>
    </nz-card>
    <ng-template #expand let-item let-index="index" let-column="column">
      <nz-card nzTitle="设备属性">
  
        <nz-table [nzNoResult]="null">
          <thead>
            <tr>
              <td>名称</td>
              <td>属性名称</td>
              <td>属性值</td>
              <td>数据侧</td>
              <td>描述</td>
              <td>时间</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let _item of cead; let i = index; let odd = odd" [ngClass]="_item.className">
              <td>{{ _item.name }}</td>
              <td>{{ _item.keyName }}</td>
              <td>{{ _item.value }}</td>
              <td>{{ _item.dataSide }}</td>
              <td>{{ _item.description }}</td>
              <td>{{ _item.dateTime }}</td>
              <td>
                <button nz-button (click)="editrelation(_item)"
                        nzType="text">
                  修改
                </button>
                <button nz-button
                        nzType="text"
                        nzDanger
                        nz-popconfirm
                        nzPopconfirmTitle="确认删除属性?"
                        (nzOnConfirm)="removeattrs(_item,item)"
                        nzPopconfirmPlacement="topLeft">
                  删除
                </button>
  
  
              </td>
            </tr>
          </tbody>
        </nz-table>
      </nz-card>
  
      <nz-card nzTitle="遥测数据">
        <nz-tabset>
          <!-- <nz-tab [nzTitle]="titleTemplate">
              <ng-template #titleTemplate>
                <i nz-icon nzType="area-chart" nzTheme="outline"></i>
                图表
              </ng-template>
  
              <div nz-row>
                不要直接绑定,会导致界面重绘
                <div *ngFor="let _item of cetd; let i = index; let odd = odd">
                  <g2-gauge [title]="_item.keyName" [height]="180" [percent]="_item.value" style="width: 200px"></g2-gauge>
                </div>
              </div>
            </nz-tab> -->
          <nz-tab [nzTitle]="titleTemplate">
            <ng-template #titleTemplate>
              <i nz-icon nzType="table" nzTheme="outline"></i>
              数据
            </ng-template>
  
            <nz-table [nzNoResult]="null">
              <thead>
                <tr>
                  <td>遥测名称</td>
                  <td>遥测值</td>
                  <td>时间</td>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let _item of cetd; let i = index; let odd = odd">
                  <td>{{ _item.keyName }}</td>
                  <td>{{ _item.value }}</td>
                  <td>{{ _item.dateTime }}</td>
  
                  <td>
                    <button nz-button
                            nzType="text"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除属性?"
                            (nzOnConfirm)="removetemps(_item,item)"
                            nzPopconfirmPlacement="topLeft">
                      删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </nz-tab>
        </nz-tabset>
      </nz-card>
    </ng-template>
  </page-header>
  